<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">

    <div class="layuimini-main">
        <button type="button" class="layui-btn" id="uploadBtn"><i class="layui-icon"></i>上传文件</button>
        <button type="button" class="layui-btn btn-hidden" id="importData">导入数据</button>
        <a href="#" target="_blank" id="downDemo">下载模板</a>

        <table class="layui-hide" id="importTerminalTable" lay-filter="currentTableFilter"></table>

<!--        <script type="text/html" id="importTerminalTableBar">-->
<!--            <a class="layui-btn layui-btn-xs layui-btn-xs data-count-edit" lay-event="edit">编辑</a>-->
<!--            <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>-->
<!--        </script>-->
    </div>
</div>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            upload=layui.upload,
            table = layui.table;

        const host = `${window.location.protocol}//${window.location.host}`;

        $.ajaxSetup({
            headers: {'Access-Token': sessionStorage.getItem('token'), 'userId': sessionStorage.getItem("userId")}
        });

        var batchNo = '';

        upload.render({ //允许上传的文件后缀
            elem: '#uploadBtn',
            url: `${host}/terminal/upload`, //此处配置你自己的上传接口即可
            accept: 'file', //普通文件
            exts: 'xls|xlsx', //只允许上传压缩文件
            auto: true,//是否自动上传，true自动上传,false手动上传
            size: 50 * 1024,//单位kb
            // choose: function (obj) {
            //     obj.preview(function (index, file, result) {
            //         $("#fileDiv").val(file.name);
            //     });
            // },
            done: function(res){
                if ("00" === res.code) {
                    layer.msg("上传成功");
                    loadTable(res.data);
                    batchNo = res.data;
                    $("#importData").removeClass('btn-hidden');
                    $("#uploadBtn").remove();
                } else {
                    layer.msg(res.msg);
                }

            },
            error: function (index, upload) {
                alert("上传失败！");
            }
        });

        loadTable();

        function loadTable(batchNo) {
            $.get(`${host}/import/data/list`, {'batchNo': `${batchNo}`}, rest => {
                if (rest.code === '00') {
                    table.render({
                        elem: '#importTerminalTable',
                        method: 'get',
                        data: rest.data,
                        toolbar: '#toolbar',
                        // defaultToolbar: ['filter', 'exports', 'print'],
                        cols: [[
                            // {type: "checkbox", width: 50},
                            // {field: 'id', width: 80, title: 'ID'},
                            {field: 'organizationCode', width: 180, title: '机构号'},
                            {field: 'appName', width: 180, title: '应用名称'},
                            {field: 'funcName', width: 180, title: '功能名称'},
                            {field: 'sn', width: 180, title: '序列号(SN)'},
                            {field: 'terminalType', width: 180, title: '型号'},
                            {field: 'expiryType', width: 180, title: '激活有效期'},
                            {field: 'never', width: 180, title: '长期有效标识'},
                            {field: 'activeStatus', width: 180, title: '终端状态'},
                            {field: 'custName', width: 180, title: '商户名称'},
                            {field: 'custMobile', width: 180, title: '电话号码'},
                            {field: 'position', width: 180, title: '安装地址'},
                            {field: 'area', width: 180, title: '安装区县'},
                            // {title: '操作', fixed: 'right', minWidth: 150, toolbar: '#importTerminalTableBar', align: "center"}
                        ]],
                        limits: [10, 15, 20, 25, 50, 100],
                        limit: 15,
                        page: false,
                        skin: 'line',
                    });
                }
            });
        }

        $('#downDemo').attr('href', `${host}/file/终端设备导入模板.xlsx`)

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            var result = JSON.stringify(data.field);
            //执行搜索重载
            table.reload('currentTableId', {
                page: { current: 1 },
                where: { 'searchParams' : result }
            }, 'data');
            return false;
        });

        $("#importData").click(() => {
            if (!batchNo || '' === batchNo) {
                return false;
            }
            layer.confirm('是否确定导入数据', function (index) {
                $.post("/import/import/data", {'batchNo': batchNo}, (rest) => {
                    layer.msg(rest.msg);
                    if (rest && "00" === rest.code) {
                        $("#importData").remove();
                    }
                })
                layer.close(index);
            });
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加',
                    btn: ['确定','关闭'],
                    type: 2,
                    shade: 0.2,
                    maxmin:false,
                    shadeClose: false,
                    area: ['80%', '80%'],
                    content: '../page/table/add.html?timestamp=' + new Date().getTime(),
                    yes : (index, layero) => {
                        let addData = $(layero).find('iframe')[0].contentWindow.callbackdata();
                        $.post("/user/add", addData, (rest) => {
                            if (rest && "00" === rest.code) {
                                layer.msg(rest.msg);
                                $(".layui-laypage-btn")[0].click();
                                layer.close(index);
                            } else {
                                layer.msg(rest.msg);
                            }
                        });
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'delete') {  // 监听删除操作
                let checkStatus = table.checkStatus('currentTableId')
                    , data = checkStatus.data;
            }
        });

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                var index = layer.open({
                    title: '编辑',
                    btn: ['确定','关闭'],
                    type: 2,
                    shade: 0.2,
                    maxmin:false,
                    shadeClose: false,
                    area: ['80%', '80%'],
                    content: '../page/table/edit.html',
                    success: (layero, index) => {
                        var body = layer.getChildFrame('body', index);
                        body.find('hidden[name="id"]').val(obj.data.id);
                        body.find('input[name="accountNo"]').val(obj.data.accountNo);
                        body.find('input[name="userName"]').val(obj.data.userName);
                        body.find('input[name="nickName"]').val(obj.data.nickName);
                        body.find('radio[name="sex"]').attr('checked', 'checked');
                        body.find('input[name="mobile"]').val(obj.data.mobile);
                    },
                    yes : (index, layero) => {
                        let editData = $(layero).find('iframe')[0].contentWindow.callbackdata();
                        $.post("/user/edit", editData, (rest) => {
                            if (rest && "00" === rest.code) {
                                layer.msg(rest.msg);
                                $(".layui-laypage-btn")[0].click();
                                layer.close(index);
                            } else {
                                layer.msg(rest.msg);
                            }
                        });
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {
                layer.confirm('是否确定删除', function (index) {
                    let id = obj.data.id;
                    $.post("/user/delete", {'id': id}, (rest) => {
                        layer.msg(rest.msg);
                        if (rest && "00" === rest.code) {
                            obj.del();
                        }
                    })
                    layer.close(index);
                });
            }
        });
    });
</script>

</body>

<style>
    .btn-hidden {
        display: none;
    }
</style>
</html>